Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS font attributes

CSS provides several properties to control the appearance of text and fonts. Here are some common font-related attributes:

1. `font-family`

Specifies the font to be used for an element:

css

.element {
    font-family: 'Arial', sans-serif; /* Multiple fonts with fallbacks */
}

2. `font-size`

Sets the size of the font:

css

.element {
    font-size: 16px; /* Font size in pixels */
    font-size: 1em;  /* Font size relative to the parent element */
    font-size: 1rem; /* Font size relative to the root element */
}

3. `font-weight`

Defines the thickness of the font:

css

.element {
    font-weight: normal; /* Normal weight */
    font-weight: bold;   /* Bold weight */
    font-weight: 700;    /* Numeric weight */
}

4. `font-style`

Specifies the style of the font (e.g., italic):

css

.element {
    font-style: normal;  /* Normal style */
    font-style: italic;  /* Italic style */
    font-style: oblique; /* Oblique style */
}

5. `font-variant`

Controls the use of alternate glyphs:

css

.element {
    font-variant: normal;        /* Normal variant */
    font-variant: small-caps;    /* Small capital letters */
}

6. `line-height`

Sets the height of lines of text:

css

.element {
    line-height: 1.5; /* Line height relative to the font size */
}

7. `letter-spacing`

Controls the space between characters:

css

.element {
    letter-spacing: 0.1em; /* Space between characters */
}

8. `text-transform`

Changes the capitalization of text:

css

.element {
    text-transform: uppercase;  /* Uppercase text */
    text-transform: lowercase;  /* Lowercase text */
    text-transform: capitalize; /* Capitalize text */
}

9. `text-align`

Aligns the text within an element:

css

.element {
    text-align: left;   /* Align text to the left */
    text-align: right;  /* Align text to the right */
    text-align: center; /* Align text to the center */
}

Feel free to use these attributes to style your text in any way you prefer! Let me know if you need more examples or have any specific questions.

Coding Schools

CSS font attributes

1. font-family

2. font-size

3. font-weight

4. font-style

5. font-variant

6. line-height

7. letter-spacing

8. text-transform

9. text-align